<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="bindApi.changPasswordState.visible"
            destroy-on-close
            title="修改密码"
            width="600"
            @close="bindApi.onCloseChangPassword()"
    >
        <el-form
                ref="formRef"
                :model="bindApi.changPasswordState.form"
                :rules="rules"
                label-width="160px"
                status-icon
        >

            <el-form-item
                    label="新密码"
                    prop="password"
            >
                <el-input
                        v-model="bindApi.changPasswordState.form.password"
                        autocomplete="new-password"
                        clearable
                        placeholder="新密码"
                        type="password"
                />
            </el-form-item>

            <el-form-item
                    label="再次输入新密码"
                    prop="passwordAgain"
            >
                <el-input
                        v-model="bindApi.changPasswordState.form.passwordAgain"
                        autocomplete="passwordAgain"
                        clearable
                        placeholder="新密码"
                        type="password"
                />

            </el-form-item>

            <el-form-item
                    class="pb-2"
                    label="验证码"
                    prop="code"
            >
                <i-send-code
                        v-model:code-type="bindApi.changPasswordState.form.codeType"
                        v-model:model-value="bindApi.changPasswordState.form.code"
                />
            </el-form-item>

            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit">修改</el-button>
                <el-button @click="bindApi.onCloseChangPassword()">关闭</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import {UserApi} from "~/api/system/user";
import {reactive, ref} from "vue";
import {FormRules} from "element-plus";
import {BindApi} from "~/api/system/account/bind.api";

interface Props {
    bindApi: BindApi;
    userApi: UserApi;
}

const formRef = ref();

const {bindApi} = withDefaults(defineProps<Props>(), {});

const error = ref<undefined | string>(undefined);
const rules = reactive<FormRules>({
    password: [{
        validator: (rule: any, value: any, callback: any) => {
            if (!value) {
                return callback(new Error("请输入密码"));
            }
            const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
            if (!pattern.exec(value)) {
                return callback(new Error("至少8-16个字符，至少1个大写字母，1个小写字母和1个数字"));
            }
            callback();
        }, trigger: "change",
    }],
    passwordAgain: [{
        validator: (rule: any, value: any, callback: any) => {
            if (!value) {
                return callback(new Error("请再次输入密码"));
            }
            if (bindApi.changPasswordState.form.password !== value) {
                return callback(new Error("两次密码输入不一致"));
            }
            callback();
        }, trigger: "change",
    }],
    code: [{required: true, message: "请输入验证码", trigger: "blur"}],
});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        bindApi.onChangPassword();
    }
}

</script>

<style lang="scss" scoped>

</style>
